﻿@{ ViewBag.Title = "jqGrid in ASP.NET MVC - Basics"; }

<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>

@section JavaScript {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Products")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['ProductID', 'ProductName', 'SupplierID', 'CategoryID', 'QuantityPerUnit', 'UnitPrice', 'UnitsInStock'],
                //columns model
                colModel: [
                            { name: 'ProductID', index: 'ProductID', align: 'left' },
                            { name: 'ProductName', index: 'ProductName', align: 'left' },
                            { name: 'SupplierID', index: 'SupplierID', align: 'left' },
                            { name: 'CategoryID', index: 'CategoryID', align: 'left' },
                            { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' },
                            { name: 'UnitPrice', index: 'UnitPrice', align: 'left' },
                            { name: 'UnitsInStock', index: 'UnitsInStock', align: 'left' }
                          ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'ProductID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%'
            });
        });
    </script>
}